<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jq操作css类</title>
    <script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js"></script>

</head>
<style>
    .important {
        font-weight: bold;
        font-size: xx-large;
    }

    .blue {
        color: blue;
    }
</style>

<body>
    <button>添加class</button>
    <button id="del">移除class</button>
    <button id="toggle">切换class</button>
    <h1 class="blue">标题1</h1>
    <h2 class="blue">标题2</h2>
    <h3>标题3</h3>
    <p class="blue">这是一个p标签</p>
    <p>这是第二个p标签</p>
    <hr>
    <div>
        <ul>
            <li>列表1</li>
            <li>列表2</li>
        </ul>
        <button id="changeUl">改变ul的样式</button>
    </div>
</body>
<script>
    $(function () {
        $("button").click(function () {
            //    $("h1,h2,h3").addClass('blue')
            //    $('p').addClass('important')

            // addClass():连续添加多类
            $("body p:first").addClass('important blue')
        })
        $("#del").click(function () {
            // removeClass():移除class
            $("body p:first").removeClass('blue')

        })
        $("#toggle").click(function () {
            // toggleClass('要添加或者删除的class'):切换class
            $("h1,h2,p").toggleClass('blue')

        })

        $("#changeUl").click(function () {
            // 设置单个属性
            // $('li').css('background-color','red')
            // 设置多个属性用对象的形式css({})
            $("li").css({"background-color":"orange","fontSize":"40px"})
        })



    })
</script>

</html>